<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/vux.min.css" rel="stylesheet"/>
    
    <style>
    	.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
    	
    	#header {
    		background: #498AF7;
    	}
    	#header a, #header h1 {
    		color: #fff;
    	}
    	.head-content {
    		padding: 15px 15px;
    		height: 110px;
    	}
    	.head-image {
    		float: left;
    		width: 120px;
    		height: 80px;
    		background-size: cover;
    		overflow: hidden;
    	}
    	.head-text {
    		list-style: none;
    		padding-left: 0;
    		margin: 0;
    		margin-left: 130px;
    	}
    	.head-text li {
    		line-height: 28px;
    	}
    	h2, p {
    		margin: 0;
    		font-weight: normal;
    	}
    	h2 {
    		font-size: 18px;
    		text-align: center;
    		color: #666;
    	}
    	.mui-content>div:not(.head-content) {
    		background-color: #fff;
    	}
    	.mui-content>div>h2 {
    		padding-top: 10px;
    	}
    	.mui-table-view::before {
    		display: none;
    	}
    	ul:not(.head-text) li {
    		color: #666;
    		font-size: 15px;
    	}
    	ul li>span {
    		float: right;
    		color: #000;
    		font-size: 15px;
    	}
    	
    	
    	ul li>p {
    		margin-top: 8px;
    		color: #333;
    		font-size: 15px;
    	}
    	.belonging-list li:nth-child(3)>span {
    		line-height: 42px;
    	}
    	
    	.doctor-display-wrapper {
    		line-height: 42px;
    	}
    	
    	.doctor-display {
    		display: inline-block;
    		width: 42px;
    		height: 42px;
    		border-radius: 21px;
    		background-size: contain;
    		vertical-align: bottom;
    	}
    	
    	.qrcode-display {
    		display: inline-block;
    		width: 42px;
    		height: 42px;
    		background-size: contain;
    		vertical-align: bottom;
    	}
    	
    	.doctor-name {
    		margin-left: 15px;
    	}
    	
    	.equipment-images {
    		margin-top: 10px;
    		display: flex;
    		flex-wrap: wrap;
    		justify-content: space-between;
    		align-items: flex-start;
    	}
    	.equipment-images img {
    		width: 32%;
    		height: 100px;
    	}
    	
    	.personal-list li:nth-child(2) {
    		line-height: 30px;
    		position: relative;
    	}
    	
    	#qrcode {
    		position: absolute;
    		top: 6px;
    		right: 15px;
    		width: 40px;
    		height: 40px;
    	}
    	.mui-content {
    		text-align: center;
    	}
    	.mui-content>div {
    		text-align: left;
    	}
    	#modify-btn {
			background-color: #007AFF;
			width: 95%;
			font-size: 20px;
			padding: 10px 0;
			border-radius: 10px;
			margin: 5px 0;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav" id="header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">设备二维码</h1>
	</header>
	<div class="mui-content" id="qrcode-content">
	    <div class="head-content">
	    	<div class="head-image" id="head-image" v-bind:style="equipment_background_image"></div>
	    	<ul class="head-text" id="head-text">
	    		<li> {{detail.name}}</li>
	    		<li>编号：{{detail.assetsid}}</li>
	    		<li>状态：{{detail.stateDesc}}</li>
	    	</ul>
	    </div>
	    <div style="text-align:center;margin-top:15px;">
    <divider>设备二维码</divider>
    <qrcode v-bind:value="detail.assetsid" type="img"></qrcode>
    <br>
    <br>
    	<input type="submit" id="modify-btn" value="打印" />
  </div>
	    
	</div>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/vue.js"></script>
	<script src="../../js/vux.min.js"></script>


	<script type="text/javascript" charset="utf-8">
	
    Vue.component('qrcode', vuxQrcode)
    Vue.component('Divider', vuxDivider)
      	
      	var urlPrefix = "https://bird.ioliu.cn/v1?url=",
			rootPath = "http://app.xiaoweicanting.com/";
		mui.plusReady(function () {
			var self = plus.webview.currentWebview();
		});
		
		
		
	var app = new Vue({
	    el: '#qrcode-content',
	    data: {
	      	equipment_background_image:"background-image: url('http://app.xiaoweicanting.com/Hospital/upload/orders/head.png');",
	      	doctor_background_image:"background-image: url('http://app.xiaoweicanting.com/Hospital/upload/orders/head.png');",
	      	equipment_qrcode_background_image:"background-image: url('http://app.xiaoweicanting.com/Hospital/upload/equipment/qrcode.jpg');",

	      	detail: {
	        "eid":"28",
	        "hospitalid":"10",
	        "hospitalname":"西京医院",
	        "departmentid":"11",
	        "departmentname":"内科",
	        "inchargeuid":"4",
	        "inchargeuname":"lee",
	        "modelid":"55",
	        "modelname":"放射类型",
	        "specid":"11",
	        "specname":"B超机",
	        "name":"mindrayB超机",
	        "assetsid":"xj1002002",
	        "productiondate":"2015-02-22",
	        "state":"0",
	        "intro":"个性化信息描述",
	        "adduid":"4",
	        "adduname":"lee",
	        "addtime":"",
	        "factoryid":"0",
	        "factoryname":"",
	        "stateDesc":"正常",
	        "inchargeuimg":"http://app.xiaoweicanting.com/Hospital/upload/orders/head.png",
	        "inchargeurole_name":"主任医师",
	        "baseManufactory":"迈瑞",
	        "baseManufactoryBase":"深圳",
	        "baseIntro":"设置一台很棒的设备！",
	        "serviceSupplier":"华宇医疗",
	        "factorySalesCode":"MINDRAY009",
	        "guaranteeTime":"2019-04-20",
	    	}
	      },
	      methods: {
	  	}
    })
		
		
    </script>
</body>
</html>